import { FormRule, PrimaryTableCol, Space, TableRowData } from 'tdesign-vue-next';

import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  name: string;
  mark: string;
  description: string;
}

export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { colKey: 'id', title: 'ID', width: 100 },
  { colKey: 'name', title: () => t('pages.sitemodel.title') },
  { colKey: 'mark', title: () => t('pages.sitemodel.table') },
  { colKey: 'description', title: () => t('common.description') },
  { colKey: 'updatedAt', title: () => t('common.createAt') },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:patch:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['content:patch:detail'] });

      return h(Space, () => {
        return [actionEdit];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  name: '',
  mark: '',
  description: '',
};

export const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true, trigger: 'change' }],
  mark: [{ required: true, trigger: 'change' }],
};
